<template>
  <div>
    <el-container style="justify-content: center;">
      <div style="line-height: 80px;width: 1000px;" >
        <el-row  :gutter="220">
<!--          <el-col :span="2">{{""}}</el-col>-->
          <el-col :span="4" v-for="(value, key) in basicData" :key="key"   >
            <el-card class="box-card" style="width:200px">
              <div style="margin-left:1px;font-size: 22px;height: 40px; text-align: center">{{ basicDataName[key] }}</div>
              <div style="margin-left:1px;font-size: 18px;height: 40px; margin-bottom:20px;text-align: center">{{ value }}</div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-container>
    <el-container>
      <el-main ><div id="myChartChina" :style="{width: '100%', height: '500px'}"></div></el-main>
    <el-aside width="380px">
      <el-card>
      <el-table
        :data="coverRank"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="排名"
          width="60">
        </el-table-column>
        <el-table-column
          prop="name"
          label="地区"
          width="80">
        </el-table-column>
        <el-table-column
          prop="coverNum"
          label="高校覆盖数"
          width="100">
        </el-table-column>
        <el-table-column
          prop="percentage"
          label="占比" width="80">
        </el-table-column>
      </el-table>
      </el-card>
    </el-aside>
    </el-container>
  </div>
</template>


<script>
    export default {
        data() {
            return {
                mapData: [],//地图数据
                basicData:{},//基本数据
                basicDataName:{"totalNum":"高校总数","todayAdd":"今日新增高校数","yesAdd":"昨日新增高校数","weekAdd":"本周新增高校数","monthAdd":"本月新增高校数"},
                coverRank:[]//图表数据
            };
        },
        name: "schoolPromotion",
        watch: {
            mapData() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.drawLine();

                })
            }
        },
        created(){
            this.initData()
        },
        mounted() {
            //this.drawLine();
        },
        methods: {
            initData(){
                var allData
                this.$axios.post("managementSystem/operation/publicity")
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                            // this.$message(fgf{
                            //   message:'服务错误',
                            //   type:'warn'
                            // });
                        } else {
                            if (data.data.errorCode == '200') {
                                allData = data.data
                                console.log(allData.errorMsg)

                                this.mapData=allData.map
                                // this.mapData=[
                                //     {name: '北京',value: 50 },
                                //     {name: '天津',value: 20 },
                                //     {name: '上海',value: 30 },
                                //     {name: '重庆',value: 10 }
                                // ];

                                this.basicData=allData.basicData
                                // this.basicData={"totalNum":100,"todayAdd":10,"yesAdd":20,"weekAdd":30,"monthAdd":50};

                                this.coverRank=allData.coverRank
                                // this.coverRank=[{"name":"北京","coverNum":100,"percentage":88},
                                //     {"name":"上海","coverNum":80,"percentage":50},
                                //     {"name":"天津","coverNum":60,"percentage":35},
                                //     {"name":"重庆","coverNum":40,"percentage":10},
                                //     {"name":"重庆","coverNum":40,"percentage":10},
                                //     {"name":"重庆","coverNum":40,"percentage":10},
                                //     {"name":"重庆","coverNum":40,"percentage":10},
                                //     {"name":"重庆","coverNum":40,"percentage":10},
                                //     {"name":"重庆","coverNum":40,"percentage":10},
                                //     {"name":"重庆","coverNum":40,"percentage":10}
                                // ];
                                for (var i in this.coverRank) {
                                    this.coverRank[i]["id"]=parseInt(i)+1;
                                    console.log(this.coverRank[i]["percentage"])
                                    this.coverRank[i]["percentage"]=this.coverRank[i]["percentage"].toString()+"%";

                                }

                            }
                        }
                    })
            },
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                var myChartContainer = document.getElementById('myChartChina');
                var resizeMyChartContainer = function(){
                    myChartContainer.style.width=(document.body.offsetWidth/2)+'px'//页面一半的大小
                }
                resizeMyChartContainer();
                var myChartChina = this.$echarts.init(myChartContainer);

                function randomData() {
                    return Math.round(Math.random()*500);
                }
                // 绘制图表
                var optionMap = {
                    tooltip: {},
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:['']
                    },
                    visualMap: {
                        min: 0,
                        max: 10,
                        left: '10%',
                        top: 'bottom',
                        text: ['高','低'],
                        calculable : true,
                        color:['#0b50b9','#c3e2f4']
                    },
                    selectedMode: 'single',
                    series : [
                        {
                            name: '',
                            type: 'map',
                            mapType: 'china',
                            itemStyle: {
                                normal:{
                                    borderColor: 'rgba(0, 0, 0, 0.2)'
                                },
                                emphasis:{
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 0,
                                    shadowBlur: 20,
                                    borderWidth: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            showLegendSymbol: true,
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:this.mapData
                        }
                    ]
                }

                myChartChina.setOption(optionMap);
                window.onresize=function(){
                    resizeMyChartContainer();
                    myChartChina.resize();
                }
            }

        }
    }
</script>

<style>
  .el-col {
    border-radius: 4px;
  }
  .container{
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
  }
</style>




